<template>
      <div style="width: 100%; height: 100%">
    <div class="bj" id="login">
      <!-- 登陆系统 -->
      <div class="dl">
        <div class="hy">欢迎使用</div>
        <div class="xitong">系统登陆</div>
        <div>
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <div class="user">
              <el-form-item label="用户名" prop="userName">
                <el-input autosize  v-model="ruleForm.userName"></el-input>
              </el-form-item>
            </div>
            <div class="pwd">
              <el-form-item label="密 码" prop="passWord">
                <el-input autosize type="password" v-model="ruleForm.passWord"></el-input>
              </el-form-item>
            </div>
          </el-form>
        </div>
        <!-- 点击事件 -->
        <div class="denglu" @click="submitForm">登录</div>
      </div>
      <div class="k1"></div>
      <div class="k2"></div>
      <div class="t1">双线质量管控体</div>
      <div class="t2">力求每件产品，每个细节都尽善尽美</div>
      <div class="t3">够专业 才放心</div>
      <div class="jz1">OPDER聚造</div>
      <div class="jz2">OPDER聚造</div>
      <div class="a">
        <div class="a1">All Rights @2021 版权所有</div>
        <div>||</div>
        <div class="a2">粤ICP备18069755号</div>
      </div>
    </div>
  </div>
</template>

<script>

import md5 from 'js-md5'


export default {
  name: "login",
  components: {
    //HelloWorld
    // 组件的引用
  },
  data() {
    return {
      ruleForm:{
        userName:'',
        passWord:''
      },
      rules: {
        userName: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        passWord: [
            { required: true, message: '请输入密码', trigger: 'blur' },
        ],        
      }
    }
  },
  methods: {
    submitForm() {
      // console.log('this.$refs',this.$refs)
      this.$refs.ruleForm.validate((valid) => {
         if (valid) {
          this.$http({
            url:'/login',
            method:'POST',
            data:{
              userName:this.ruleForm.userName,
              passWord:md5(this.ruleForm.passWord),
              platform:'Web'
             }
          }).then(res => {
            if(!res.errorMsg){
              localStorage.setItem('token',res.token)
              localStorage.setItem('user',JSON.stringify(res))
              this.$router.push('/index')
            }
          })
        } 
      });     
    },
  },
  created() {},
  mounted() {},
};
</script>

<style>
@media screen and (max-width: 1800px) {
  .dl {
    transform: translate(50px, -55%) scale(0.8);
  }
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.bj {
  background-image: url(../assets/bj.png);
  background-size: 100% 100%;
  margin-left: 50px;
  width: 1800px;
  height: 960px;
}
.dl {
  background: #ece9ea;
  /* background-size: 100% 100%; */
  opacity: 0.8;
  border-radius: 10%; /*div画圆按比例实现，是整个div修形*/
  position: absolute;
  width: 360px;
  height: 400px;
  margin-left: 60%;
  margin-top: 300px;
}
.hy {
  opacity: 0.5;
  margin-left: 30px;
  margin-top: 30px;
  width: 80px;
}
.xitong {
  font-size: 36px;
  font-weight: 1000;
  margin-left: 30px;
  width: 180px;
}
.user {
  margin-top: 20px;
  display: flex;
}
.pwd {
  display: flex;
}
.shuruk1 {
  width: 40px;
  height: 30px;
  background-color: #fff;
}
.shuruk2 {
  width: 40px;
  height: 30px;
  background-color: #fff;
}
.denglu {
  background-color: #426dff;
  color: #fff;
  text-align: center;
  border-radius: 30px 30px 30px 30px; /*只针对div的四个角落，修的是边缘*/
  margin-top: 50px;
  margin-left: 36px;
  padding-top: 15px;
  width: 300px;
  height: 34px;
}
.k1 {
  background-color: #fff;
  opacity: 0.5;
  height: 240px;
  width: 200px;
  position: absolute;
  margin-top: 330px;
  margin-left: 80px;
}
.k2 {
  background-color: #fff;
  opacity: 0.5;
  height: 240px;
  width: 200px;
  position: absolute;
  margin-top: 570px;
  margin-left: 180px;
}
.t1 {
  color: #fff;
  font-size: 30px;
  position: absolute;
  margin-top: 400px;
  margin-left: 76px;
}
.t2 {
  color: #fff;
  font-size: 30px;
  position: absolute;
  margin-top: 500px;
  margin-left: 44px;
}
.t3 {
  color: #68b9da;
  font-size: 56px;
  position: absolute;
  margin-top: 520px;
  margin-left: 144px;
}
.a {
  display: flex;
  justify-content: center;
  padding-top: 900px;
}
.a1 {
  margin-right: 40px;
}
.a2 {
  margin-left: 10px;
}
.jz1 {
  position: absolute;
  color: #fff;
  opacity: 0.5;
  font-size: 46px;
  margin-top: 900px;
  margin-left: 1300px;
}
.jz2 {
  position: absolute;
  color: blue;
  font-size: 30px;
  margin-top: 920px;
  margin-left: 1300px;
}
</style>